<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    /**
     * 语法: CanvasRenderingContext2D.textAlign = value
     *
     * 描述:
     *
     * 该属性用于设置文字的水平对齐方式. 设置文字居中, 靠左右对齐等.
     * 该属性可以设置的值有: start( 默认 ), end, left, right, center.
     */
    ctx.moveTo( 150, 100 );
    ctx.lineTo( 150, 200 );
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 150 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';
    ctx.textAlign = 'start'; // 默认
    ctx.fillText( '测试文字', 150, 150 );
</script>
</body>
</html>